<template>
  <continer>
    <template slot="search">
      <QuickSearch :advForm="quickSearchForm" @QuickSearch="search"></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="search">查询</el-button>
    </template>
    <template slot="content">
      <configTable
              :headers="tableHeaders"
              :data="tableData"
              :pagingData="pagingData"
              @pageChange="pageChange"
              @pageSizeChange="pageSizeChange"
              @checkHeadersChange="checkHeadersChange">
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
                    :show-overflow-tooltip="true"
                    :resizable="false"
                    :prop="item.prop"
                    :label="item.label"
                    :key="index"
                    :sortable="item.sortable"
                    v-if="item.show && item.prop !== 'oprate'">
            </u-table-column>
            <u-table-column
                    :label="item.label"
                    :width="68"
                    :key="index"
                    v-if="item.prop === 'oprate' && item.show">
              <template slot-scope="scope">
                <span @click="editService(scope.row)" class="oprate-span" v-functions="['server_number_edit']">编辑</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
      <EditService :drawerData="drawer" ref="serviceRef" @refresh="fetchData"></EditService>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import configTable from '@/components/configCommon/table.vue'
import EditService from './EditService.vue'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import { IvrModule } from '@/store/modules/config/ivr'
interface DrawerObj {
    form: object
}

interface PageData {
    total: number
    limit: number
    page: number
}
@Component({
  name: 'ServiceNumber',
  components: { continer, configTable, EditService, QuickSearch }
})
export default class extends Vue {
  [x: string]: any
  @Ref() private readonly serviceRef!: EditService
  private drawer: DrawerObj = { form: { name: '', number: '', voiceNavId: '' } } // 抽屉中用到的数据
  private pagingData: PageData = { total: 0, limit: 10, page: 1 } // 翻页相关的数据控制
  private tableHeaders: object[] = [ // 表头信息
    { label: '服务号', prop: 'number' },
    { label: '别名', prop: 'name' },
    { label: '语音导航名称', prop: 'ivrName' },
    { label: '最后更新时间', prop: 'updateTime', sortable: true },
    { label: '操作', prop: 'oprate' }
  ]

  private quickSearchForm: any = { // 快捷检索数据（服务号）
    form: {
      number: ''
    },
    advSearchOptions: [
      { label: '服务号', inputType: 'input', placeholder: '请输入服务号', name: 'number', clearable: true }
    ]
  }

  private checkHeaders: [] = [] // 当前展示的表头信息

  private tableData: object[] = [] // table数据

  private editService (row: any) { // 编辑服务号
    this.serviceRef.openDrawer()
    this.drawer = { form: { _id: row._id, name: row.name, number: row.number, ivrId: row.ivrId } }
  }

  private search () { // 点击查询
    this.pagingData.page = 1
    this.fetchData()
  }

  private pageChange (page) { // 翻页
    this.pagingData.page = page
    this.fetchData()
  }

  private pageSizeChange (size) { // 每页多少条数据
    this.pagingData.limit = size
    this.pagingData.page = 1
    this.fetchData()
  }

  private checkHeadersChange (checkList) { // 设置表头
    this.$set(this, 'checkHeaders', checkList)
  }

  private fetchData () { // 查列表
    const actionData = Object.assign({ limit: this.pagingData.limit, page: this.pagingData.page }, this.quickSearchForm.form)
    const data = { url: '/call/action/config/serviceNumber/query', method: 'POST', data: actionData }
    IvrModule.IvrCommonAction(data).then((res: any) => {
      if (res && res.success) {
        const list = res.list || []
        list.forEach((item: any) => {
          const agentObj = this.$store.state.common.publicCache.userListObj[item.updateUser]
          item.agentName = agentObj ? agentObj.name : '--'
        })
        this.tableData = list
        this.pagingData.total = res.count || 0
      }
    })
  }

  private beforeMount () {
    this.fetchData()
  }
}
</script>

<style lang="stylus" scoped>
  .oprate-span,.radio-span
    cursor pointer
    color $c-main
  .delete-span
    color $c-danger
    padding-left 10px
  .radio-span
    width 24px
    height 24px
    display inline-block
    background #fff
    margin 2px 0px 2px 0
    box-shadow 0px 1px 3px 0px rgba(216, 222, 230, 0.9)
    border-radius 50%
    font-size 12px
    color $c-main
    text-align center
    vertical-align middle
    &:last-child
     margin-right 0
     margin-left 10px
</style>
